import PageTitle from "./../PageTitle";
import { defineComponent } from "vue";
import { HeaderProps } from "../Header/types";
import { getSize } from "@/command/apiTool";
export default defineComponent({
  name: "page-img-title",
  props: {
    ...HeaderProps,
    childClass: {
      type: String,
      default: "",
    },
    bgColor: {
      type: String,
      default: "",
    },
    img: {
      type: String,
      default: "",
    },
    imgHeight: {
      type: Number,
      default: 120,
    },
    imgMarginBottom: {
      type: Number,
      default: -36,
    },
  },
  setup(props, { slots }) {
    const renderImg = () => {
      return (
        props.img && (
          <div
            class={"mx-[-15px] mt-[-20px]"}
            style={{
              height: getSize(props.imgHeight),
              backgroundImage: `url(${props.img})`,
              backgroundSize: "100% 100%",
              marginBottom: getSize(props.imgMarginBottom),
            }}
          ></div>
        )
      );
    };
    return () => {
      return (
        <PageTitle {...props}>
          {renderImg()}
          {slots.default?.()}
        </PageTitle>
      );
    };
  },
});
